<template>
	<view class="service2">
		<view class="service2-top">
			<view class="service2-top-part">
				<view class="service2-top-part-title">
					<view class="service2-top-part-title-part">
						<text style="margin-left: 20rpx;">自助服务</text>
					</view>
				</view>
				<view class="service2-top-connet">
					<view class="service2-top-connet-list" v-for="(item,index) in Service2menu" :key="index"
						@click="ToSuggest(item.type_id,item.title)">
						<image :src="item.img" mode="widthFix" style="width: 100rpx; height: 100rpx;"></image>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="service2-connet">
			<view class="service2-connet-part">
				<view class="service2-top-part-title" style="border-bottom: solid 2rpx #f7f7f7; margin-top: 20rpx;">
					<view class="service2-top-part-title-part">
						<text style="margin-left: 20rpx;">猜你想问</text>
					</view>
				</view>
				<view class="service2-top-part-title" style="border-bottom: solid 2rpx #f7f7f7 ; height: 90rpx;"
					v-for="(item,index) in problem" :key="index">
					<view class="service2-top-part-title-part"
						style="border: 0; color: #7f7f7f; justify-content: space-between;font-size: 28rpx;"
						@click="Tohelp(item.id)">
						<text style="margin-left: 20rpx;">{{index + 1}}.{{item.article_title}}</text>
						<image src="../../pagesA/static/suggest/more.png" mode="widthFix"
							style="width: 14rpx;margin-right: 20rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="service2-buttom">
			<view class="service2-buttom-part">
				<view class="bg_service" style="margin-right: -20rpx;">
					<image src="@/static/service/answer02.png" mode="widthFix" style="width: 120rpx" @click="callPhone">
					</image>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import phoneNumber from "@/common/phoneNum.js"
	export default {
		data() {
			return {
				Service2menu: [{
						title: '支付租金',
						img: require('../../pagesA/static/suggest/service-05.png'),
						type_id: 10
					},
					{
						title: '售后问题',
						img: require('../../pagesA/static/suggest/service-03.png'),
						type_id: 18
					},
					{
						title: '租金问题',
						img: require('../../pagesA/static/suggest/service-06.png'),
						type_id: 16
					},
					{
						title: '其他问题',
						img: require('../../pagesA/static/suggest/service-02.png'),
						type_id: 10
					},
					{
						title: '投诉建议',
						img: require('../../pagesA/static/suggest/service-04.png'),
						type_id: "/pagesA/suggest/suggest4",
					},
				],
				problem: [],
				type: ''
			}
		},
		onLoad() {
			const data = {
				type: ""
			}
			this.$http("GET", "Help/getCommonProblemType", data)
				.then(res => {
					this.problem = res.data.data
				})
		},
		methods: {
			callPhone() {
				uni.makePhoneCall({
					phoneNumber,
				});
			},
			Tohelp(id) {
				uni.navigateTo({
					url: '/pagesA/help/help?id=' + id
				})
			},
			ToSuggest(id, title) {
				if (typeof id === "number") {
					uni.navigateTo({
						url: '/pagesA/suggest/suggest?type_id=' + id + '&title=' + title
					})
				} else {
					uni.navigateTo({
						url: id,
					})
				}
			},
		},
		onShareAppMessage() {
			return {
				title: '挺想租 | 租好物分享新生活 服务',
				path: this.$mp.page.route,
				imageUrl: '/logo.jpg',
			}
		},
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.service2 {
		width: 100%;
		height: 100%;
	}

	.service2-top {
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.service2-top-part {
		width: 690rpx;
		height: 80%;
		background-color: white;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		border-radius: 12rpx;
	}

	.service2-top-part-title {
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.service2-top-part-title-part {
		width: 94%;
		height: 30%;
		border-left: red solid 4rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.service2-top-connet {
		width: 100%;
		height: calc(100% - 70rpx);
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.service2-top-connet-list {
		width: 18%;
		height: 90%;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-content: space-around;
		flex-wrap: wrap;
	}

	.service2-connet {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.service2-connet-part {
		width: 690rpx;
		height: 100%;
		background-color: white;
		border-radius: 12rpx;
	}


	.service2-buttom {
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 30rpx;
	}

	.service2-buttom-part {
		width: 690rpx;
		height: 130rpx;
		background-color: white;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 12rpx;
	}

	.bg_service {
		background-color: #fff;
		border-radius: 20rpx;
		width: 300rpx;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.contact {
		margin: 0;
		padding: 0;
		width: 120rpx;
		height: 100rpx;
		border: none !important;
		border-radius: 0 !important;
		background-color: transparent !important;
	}

	button::after {
		border: none;
	}
</style>